import { Space, Card, Statistic, Row, Col, List, Tag, Progress } from 'antd';
import { Link } from 'ice';
import React, { useEffect, useState } from 'react';

export default function Dashboard() {

  const [ systeminfo, setSystemInfo] = useState({
    cpu: 0,
    memory: 40,
    hdd: 60
  });

  useEffect(() => {
    const interval = setInterval(() => {
      setSystemInfo({
        cpu: Math.round(Math.random() * 100),
        memory: Math.round(Math.random() * 10 + 40),
        hdd: Math.round(Math.random() * 5 + 60),
      });
    }, 1000);
    return () => {
      window.clearInterval(interval);
    }
  }, [setSystemInfo]);

  return (
    <Card
      style={{ width: '100%', minHeight: '100%' }}
    >
      <Space direction="vertical" size={20} style={{ width: '100%'}}>
        <Row gutter={20}>
          <Col span={6}>
            <Card>
              <Statistic title="系统状态" value="正常" valueStyle={{ color: '#3f8600'}}/>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic title="处理数据量" value={9999999}/>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic title="异常次数" value={999} valueStyle={{ color: '#cf1322' }}/>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic.Countdown title="下次执行" value={Date.now() + 100000} format="ss秒" />
            </Card>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={8}>
            <Card title="服务器状态" style={{ width: '100%' }}>
              <div>
                CPU
              </div>
              <Progress percent={systeminfo.cpu} status="active"/>
              <div>
                内存
              </div>
              <Progress percent={systeminfo.memory} status="active"/>
              <div>
                硬盘
              </div>
              <Progress percent={systeminfo.hdd} status="active"/>
            </Card>
          </Col>
          <Col span={8}>
            <Card title="任务执行次数" extra={<Link to="/table">更多</Link>} style={{ width: '100%' }}>
              <List>
                <List.Item>
                  <List.Item.Meta title="任务1" description="任务说明" />
                  <div>99999</div>
                </List.Item>
                <List.Item>
                  <List.Item.Meta title="任务2" description="任务说明" />
                  <div>99999</div>
                </List.Item>
              </List>
            </Card>
          </Col>
          <Col span={8}>
            <Card title="服务状态" extra={<Link to="/table">更多</Link>} style={{ width: '100%' }}>
              <List >
                <List.Item>
                  <List.Item.Meta title="服务1" description="服务说明" />
                  <div>
                    <Tag color="#87d068">正常</Tag>
                  </div>
                </List.Item>
                <List.Item>
                  <List.Item.Meta title="服务2" description="服务说明" />
                  <div>
                    <Tag color="#f50">异常</Tag>
                  </div>
                </List.Item>
              </List>
            </Card>
          </Col>
        </Row>
      </Space>
    </Card>
  );
}